<template>
  <div class="serviceAndSupport">
    <div class="content">
      <div class="first">
        <div class="item-title">客户服务</div>
        <div class="item" @click="handleNews">资讯中心</div>
        <div class="item" @click="handleCall">联系我们</div>
        <div class="item" @click="handleOrder">工单服务</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { localCache } from "@/utils/cache";
const router = useRouter();

// 跳转资讯中心
const handleNews = () => {
  router.push("/client/news");
}

// 联系我们
const handleCall = () => {
  router.push("/client/others/aboutUs");
};

// 工单服务
const handleOrder = () => {
  if (localCache.getCache("myToken") == undefined) {
    router.push("/login");
  } else {
    router.push("/control/financialAfterSale/workOrder");
  }
};
</script>
<style lang="less" scoped>
@import "@/assets/styles/pop_up/pop_up_two.less";
.first {
  width: 300px;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  .item-title {
    border-bottom: 1px solid #c2c2c2;
    font-size: 16px;
    width: 100%;
    height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .item {
    width: 100%;
    height: 50px;
    padding-left: 20px;
    line-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &:hover {
      cursor: pointer;
      color: #fff;
      background-color: #223f9d;
    }
  }
}
</style>
